<template>
  <el-breadcrumb separator="/">
    <template v-for="item in breadcrumbs" :key="item.name">
      <el-breadcrumb-item :to="{ path: item.path }">{{
        item.name
      }}</el-breadcrumb-item>
    </template>
  </el-breadcrumb>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, computed } from "vue";
import { useStore } from "@/store";
import { useRoute, useRouter } from "vue-router";
import { pathMapBreadcrumbs } from "@/utils/map-menu";
export default defineComponent({
  setup() {
    const store = useStore();
    const userMenus = store.state.loginModule.userMenus;
    const router = useRouter();

    // 设置面包屑数据
    const breadcrumbs = computed(() => {
      const route = useRoute();
      const currentPath = route.path;
      return pathMapBreadcrumbs(userMenus, currentPath);
    });
    return {
      breadcrumbs,
    };
  },
});
</script>
